<script>
  init({
    title: 'Tree Column',
    desc: 'Use Plugin: bootstrap-table-tree-column.',
    links: [
      'bootstrap-table.min.css',
      'extensions/tree-column/bootstrap-table-tree-column.css'
    ],
    scripts: [
      'bootstrap-table.min.js',
      'extensions/tree-column/bootstrap-table-tree-column.min.js'
    ]
  })
</script>

<table id="table" class="table table-hover">
  <thead>
    <tr>
      <th data-field="id">
        ID
      </th>
      <th data-field="pid">
        PID
      </th>
      <th data-field="name">
        Item Name
      </th>
      <th data-field="price">
        Item Price
      </th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')

  function mounted() {
    $table.bootstrapTable({
      treeShowField: 'name',
      url: 'json/data7.json'
    })
  }
</script>
